<template>
  <el-row :gutter="20">
    <!-- 左边：提交教师信息表单 -->
    <el-col :span="12">
      <el-card>
        <el-form :model="famousForm" label-width="120px">
          <!-- 选择教师下拉框 -->
          <el-form-item label="教师昵称">
            <el-select
                v-model="famousForm.teacherId"
                filterable
                placeholder="请搜索教师"
                style="width: 240px"
            >
              <el-option
                  v-for="item in teachers"
                  :key="item.id"
                  :label="item.nickname"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="上传图像">
            <el-upload
                class="upload-demo"
                drag
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                multiple
                :http-request="toUploadFile"
                limit="1"
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                Drop file here or <em>click to upload<br>只允许上传一个文件</em>
              </div>
              <template #tip>
                <div class="el-upload__tip">
                </div>
              </template>
            </el-upload>
          </el-form-item>

          <!-- 输入教师简介 -->
          <el-form-item label="教师简介">
            <el-input
                type="textarea"
                v-model="famousForm.description"
                placeholder="请输入教师简介"
                :resize="'none'"
                rows="8"
            ></el-input>
          </el-form-item>

          <!-- 提交按钮 -->
          <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>

    <!-- 右边：教师信息列表 -->
    <el-col :span="12">
      <el-card>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="teacherName" label="教师姓名" width="80"></el-table-column>
          <el-table-column prop="file" label="照片" width="180">
            <template #default="scope">
              <img :src="scope.row.fileUrl" alt="教师照片" style="width: 100px; height: 100px;" />
            </template>
          </el-table-column>
          <el-table-column prop="description" label="教师简介" width="200"></el-table-column>

          <el-table-column label="操作" width="80">
            <template #default="scope">
              <el-button type="danger" size="small" @click="deleteFamous(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination style="margin-top:20px" :current-page="famousSearchForm.pageNum" :page-size="famousSearchForm.pageSize"
                       :page-sizes="[2, 3, 4, 5]" layout="->,total, sizes, prev, pager, next, jumper" :total="total"
                       @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import famousAPI from "../../api/famous.js";


let tableData = ref([]);
let teachers = ref([]);
let total = ref(0);
//列表
let famousForm = reactive({
  teacherId:'',
  teacherName:'',
  description:'',
  fileUrl:'',
  fileType:'',
  fileName:''
})

// 分页
const famousSearchForm = reactive({
  pageNum: 1,
  pageSize: 3
})

// Dom 挂载之后
onMounted(() => {
  teacherList();
  getTeacherList();
})

const handleSizeChange = (size) => {
  famousSearchForm.pageSize = size;
  getTeacherList();
}
const handleCurrentChange = (current) => {
  famousSearchForm.pageNum = current;
  getTeacherList();
}

const getTeacherList = async () => {
  const res = await famousAPI.list(famousSearchForm);
  tableData.value = res.data.data.records;
  tableData.value.forEach(item => {
    item.fileUrl = item.fileUrl?'http://localhost:18000/course/famous/preview/' + item.fileUrl:null
  })
  total.value = res.data.data.total;
}

//获取教师下拉框
const teacherList = async () => {
  const res = await famousAPI.famousList();
  teachers.value = res.data.data;
}

//上传文件
const toUploadFile = (param) => {
  console.log(param);
  const file = param.file;
  const formData = new FormData();
  formData.append('file', file);
  famousAPI.add(formData).then((res) => {
    ElMessage.success("上传成功")
    if (res.data.code === 200){
      let data = res.data.data
      let {fileUrl,fileType,fileName}=data
      famousForm.fileUrl = fileUrl;
      famousForm.fileType = fileType;
      famousForm.fileName = fileName;
    }
  })
  return famousForm;
}


//提交
const submit = async ()=>{
  const res = await famousAPI.insert(famousForm);
  if (res.data.code === 200) {
    ElMessage({
      message: '添加成功',
      type: 'success',
    })
    famousForm = reactive({})
    await getTeacherList();
  }else {
    ElMessage.error(res.data.msg);
  }
}

//删除
const deleteFamous = (id) => {
  ElMessageBox.confirm(
      '确定要删除该教师信息吗?',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    const res = await famousAPI.del({ 'id': id });
    if (res.data.code === 200) {
      ElMessage.success("删除成功")
      await getTeacherList();
    } else {
      ElMessage.error("删除失败")
    }
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  })
}
</script>

<style scoped>

</style>